<template>
    <div style="width: 100%;height: 100%;overflow-x: hidden">
        <el-row class="tac" style="width: 100%;height: 100%">
            <el-col :span="3" style="width: 100%;height: 100%">
                <el-menu style="width: 100%;height: 100%"
                         :default-active="$route.path"
                         router
                         class="el-menu-vertical-demo"
                         active-text-color="#40a2ab">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>基座应用</span>
                        </template>
                        <el-menu-item-group>
                            <template slot="title">京东MicroApp</template>
                            <el-menu-item index="/Page1">基座应用页面1</el-menu-item>
                            <el-menu-item index="/Page2">基座应用页面2</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-menu-item index="/child/my-page/*">
                        <i class="el-icon-menu"></i>
                        <span slot="title">Vue子应用一</span>
                    </el-menu-item>
                    <el-menu-item index="/child/my-page2/*">
                        <i class="el-icon-menu"></i>
                        <span slot="title">Vue子应用二</span>
                    </el-menu-item>
                    <!--    <el-menu-item index="/child/static">
                            <i class="el-icon-document"></i>
                            <span slot="title">静态页面一</span>
                        </el-menu-item>-->
                </el-menu>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "index",
        methods: {}
    }
</script>

<style scoped>
    .el-submenu .el-menu-item {
        min-width: 0;
    }
</style>
